<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="用户管理">

        <!--按钮功能区-->
        <div class="app-container" style="float: right">
          <el-button size="mini"  type="primary" @click="userHandleAdd()">新增</el-button>
          <el-button size="mini"  type="primary"  @click="handleDataSelect()">查询</el-button>
        </div>

        <div>
          <el-table :data="userTableData" style="width: 100%;" border>
              <el-table-column type="selection" width="55" />
            <el-table-column prop="userName" label="姓名" width="180" align="center" />
              <el-table-column prop="sex" label="姓别" width="120" align="center">
                  <template #default="scope">
                      <span v-if="scope.row.sex == 1" >男</span>
                      <span v-if="scope.row.sex == 0" >女</span>
                  </template>
              </el-table-column>
            <el-table-column prop="phone" label="电话" width="180" align="center"/>
            <el-table-column prop="address" label="地址" align="center" />
            <el-table-column prop="roleName" label="拥有角色" align="center"/>
              <el-table-column fixed="right" align="center" label="操作" width="150" >
              <template #default="scope">
                <el-button size="mini" type="primary" @click="userHandleEdit(scope.row)">编辑</el-button>
                <el-popconfirm title="确定删除吗"
                               confirmButtonText="确定"
                               cancelButtonText="取消"
                               :icon="InfoFilled"
                               icon-color="red"
                               @confirm="userHandleDel(scope.$index,scope.row)">
                  <template #reference>
                    <el-button size="mini" type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--分页-->
        <div style="margin-left: 20px">

          <el-pagination
                  v-model:currentPage="userCurrentPage"
                  :page-size="userCurrentSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="userTotal"
                  @size-change="userHandleSizeChange"
                  @current-change="userHandleCurrentChange">
          </el-pagination>

        </div>
        <div>
          <el-dialog v-model="userDialogFormVisible" title="添加用户" width="30%" :open="getRoleInfo()">
            <el-form :model="userForm" :label-position="right" label-width="100px" >
              <el-form-item label="用户名：">
                <el-input v-model="userForm.userName"  size="small" style="width:90%"></el-input>
              </el-form-item>
                <el-form-item label="性别：">
                    <el-select v-model="userForm.sex" placeholder="性别" size="small" style="width:90%">
                        <el-option
                                v-for="item in sexs"
                                :key="item.id"
                                :label="item.sex"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
              <!--  <el-form-item label="密码：">
                    <el-input v-model="userForm.password" size="small"  style="width:90%" ></el-input>
                </el-form-item>-->
              <el-form-item label="电话:">
                <el-input v-model="userForm.phone" size="small"  style="width:90%" ></el-input>
              </el-form-item>
              <el-form-item label="邮箱:">
                 <el-input v-model="userForm.email" size="small"  style="width:90%" ></el-input>
              </el-form-item>
                <el-form-item label="角色:">
                    <el-select v-model="userForm.roleId" multiple placeholder="请选择角色" size="small" style="width:90%">
                        <el-option
                                v-for="item in roleInfo"
                                :key="item.id"
                                :label="item.roleName"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系地址:">
                    <el-input type="textarea" v-model="userForm.address" size="small"  style="width:90%" />
                </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="userDialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="userAddConfirm()">确认</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </el-tab-pane>











      <el-tab-pane label="角色管理">
          <div class="app-container" style="float: right">
              <el-button size="mini"  type="primary" @click="roleHandleAdd()">新增</el-button>
              <el-button size="mini"  type="primary"  @click="roleHandleDataSelect()">查询</el-button>
              <el-button size="mini"  type="primary"  @click="perHandleDataSelect()">禁用</el-button>
              <el-button size="mini"  type="primary"  @click="perHandleDataSelect()">启用</el-button>
          </div>
          <div>
              <el-table :data="roleTableData" style="width: 100%;" border  tooltip-effect="dark"
                        @selection-change="roleHandleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="xh" align="center" width="120"  type="index" label="序列"/>
                  <el-table-column prop="roleName" align="center" label="角色名称"/>
                  <el-table-column prop="roleCode" align="center" label="角色编号"/>
                  <el-table-column prop="permissionName" align="center" label="拥有权限"/>
                  <el-table-column prop="status" align="center" label="状态"/>
                  <el-table-column prop="createTime"  align="center" label="创建时间"/>
                  <el-table-column fixed="right" align="center" label="操作" width="150">
                      <template #default="scope">
                          <el-button size="mini" @click="roleHandleEdit(scope.$index,scope.row)" type="primary">编辑</el-button>
                          <el-popconfirm title="确定删除吗"
                                         confirmButtonText="确定"
                                         cancelButtonText="取消"
                                         :icon="InfoFilled"
                                         icon-color="red"
                                         @confirm="roleHandleDel(scope.$index,scope.row)">
                              <template #reference>
                                  <el-button size="mini" type="danger">删除</el-button>
                              </template>
                          </el-popconfirm>
                          <!--<el-switch v-model="roleStatus" inline-prompt="true" active-text="禁用" size="large" inactive-text="启用">
                          </el-switch>-->
                      </template>
                  </el-table-column>
              </el-table>
          </div>
          <!--分页-->
          <div style="margin-left: 20px">

              <el-pagination
                      v-model:currentPage="roleCurrentPage"
                      :page-size="roleCurrentSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="roleTotal"
                      @size-change="roleHandleSizeChange"
                      @current-change="roleHandleCurrentChange">
              </el-pagination>

          </div>
          <div>
              <el-dialog v-model="roleDialogFormVisible" title="新增角色"  width="30%"  :open="getPermissionList()">
                  <el-form :label-position="right"
                          :model="roleForm" :rules="formRules" label-width="100px">
                      <el-form-item label="角色名称:">
                          <el-input v-model="roleForm.roleName"  size="small" style="width:90%" placeholder="角色名称"></el-input>
                      </el-form-item>
                      <el-form-item  label="角色编号:">
                          <el-input v-model="roleForm.roleCode" readonly="true"  size="small" style="width:90%" placeholder="角色编号"></el-input>
                      </el-form-item>
                      <el-form-item label="权   限:">
                          <el-select v-model="roleForm.permissionIdList" multiple placeholder="Select" size="small" style="width:90%">
                              <el-option
                                      v-for="item in permissionList"
                                      :key="item.id"
                                      :label="item.permissionName"
                                      :value="item.id"
                              >
                              </el-option>
                          </el-select>
                      </el-form-item>
                  </el-form>
                  <template #footer>
                            <span class="dialog-footer">
                                <el-button type="primary" size="mini"  style="margin-left: 10px;" @click="roleSubmit()">确定</el-button>
                                <el-button @click="roleHandleCancle()" style="margin-left: 10px;"  size="mini">取消</el-button>
                            </span>
                  </template>
              </el-dialog>
          </div>
      </el-tab-pane>








      <el-tab-pane label="权限管理">

        <div class="app-container" style="float: right">
          <el-button size="mini"  type="primary" @click="perHandleAdd()">新增</el-button>
          <el-button size="mini"  type="primary"  @click="perHandleDataSelect()">查询</el-button>
          <el-button size="mini"  type="primary"  @click="perHandleDataSelect()">禁用</el-button>
            <el-button size="mini"  type="primary"  @click="perHandleDataSelect()">启用</el-button>
        </div>
        <div>
          <el-table :data="premissionTableData" style="width: 100%;" border>
              <el-table-column type="selection" width="55" />
            <el-table-column prop="xh" align="center" width="120"  type="index" label="序列"/>
            <el-table-column prop="permissionName" align="center" label="权限名称"/>
            <el-table-column prop="permissionCode" align="center" label="权限编号"/>
            <el-table-column prop="status" align="center" label="状态"/>
            <el-table-column prop="createTime"  align="center" label="创建时间"/>
            <el-table-column fixed="right" align="center" label="操作" width="150">
              <template #default="scope">
                <el-button size="mini" @click="handleEdit(scope.$index,scope.row)" type="primary">编辑</el-button>
                <el-popconfirm title="确定删除吗"
                               confirmButtonText="确定"
                               cancelButtonText="取消"
                               :icon="InfoFilled"
                               icon-color="red"
                               @confirm="handleDel(scope.$index,scope.row)">
                  <template #reference>
                    <el-button size="mini" type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--分页-->
        <div style="margin-left: 20px">

          <el-pagination
                  v-model:currentPage="perCurrentPage"
                  :page-size="perCurrentSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="perTotal"
                  @size-change="perHandleSizeChange"
                  @current-change="perHandleCurrentChange">
          </el-pagination>

        </div>
        <div>
          <el-dialog v-model="perDialogFormVisible" title="新增权限"  width="30%">
            <el-form :model="PerForm" :rules="formRules" :label-position="right" label-width="100px">
              <el-form-item label="权限名称:">
                <el-input v-model="PerForm.permissionName"  size="small" style="width:90%" placeholder="权限名称"></el-input>
              </el-form-item>
              <el-form-item label="权限编号:">
                <el-input v-model="PerForm.permissionCode" readonly="true"  size="small" style="width:90%" placeholder="权限编号"></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
                            <span class="dialog-footer">
                                <el-button type="primary" size="mini"  style="margin-left: 10px;" @click="PermissionSubmit()">确定</el-button>
                                <el-button @click="PermissionHandleCancle()" style="margin-left: 10px;"  size="mini">取消</el-button>
                            </span>
            </template>
          </el-dialog>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
  import request from "../../utils/request";
  import {ElMessage} from "element-plus";

  export default {
    name: "DataManager",
    data(){
      return{

        ////////用户管理///////////////
        userDialogFormVisible:false,
        formRules:{
          themeName:[
            {required:true,message:"主题名不能为空",trigger:"blur"}
          ]
        },
        userForm:{},
          sexs:[{'sex':'男','id':1},{'sex':'女','id':0}],
        //-----数据集合---------------
        userTableData: [],
        //变量：当前页
        userCurrentPage:1,
        //每页多少条
        userCurrentSize:5,
        //变量：总记录数
        userTotal:0,
          //角色
          roleInfo:[],
          //
          roleMultipleSelection:[],


          ////////权限管理///////////////////////////////////////////////
        perDialogFormVisible:false,
        PerForm:{},
        premissionTableData:[],
        //变量：当前页
        perCurrentPage:1,
        //每页多少条
        perCurrentSize:5,
        //变量：总记录数
        perTotal:0,




///////////////角色//////////////////////////////////////////////////
          roleDialogFormVisible:false,
          roleForm:{},
          roleTableData:[],
          //变量：当前页
          roleCurrentPage:1,
          //每页多少条
          roleCurrentSize:5,
          //变量：总记录数
          roleTotal:0,
          //权限
          permissionList: [],
          roleStatus:true

      }
    },
    created(){
      this.userHandleDataList();

      this.handlePermissionDataList();

      this.handleRoleDataList();
    },
    methods: {


      ////////////用户///////////////////////////////////////////////
      userAddConfirm(){
        request.post("/api/user/userAdd",this.userForm).then(res=>{
          if(res.status =='M0200'){
            //提示
            ElMessage({
              message:"添加成功",
              type:"success"
            })
          }else{
            ElMessage({
              message:"添加失败:"+res.msg,
              type:"error"
            })
          }
          //关闭弹出
          this.userDialogFormVisible=false,
                  //加载列表
                  this.userHandleDataList()
        })
      },
      userHandleAdd(){
        this.userDialogFormVisible=true;

      },

      userHandleCurrentChange(v){
        this.userCurrentPage=v
        this.userHandleDataList()
      },
      userHandleSizeChange(v){
        this.userCurrentSize=v
        this.userHandleDataList()
      },
      userHandleEdit(row){
          this.$router.push({
                  path:'/UserEditAndDetail',
                  query:{
                      id:row.id,
                      type:'edit'
                  }
          })
      },
      userHandleDel(index,item){
        request.post("/api/user/userDel",item).then(res=>{
          if(res.status =='M0200'){
            //提示
            ElMessage({
              message:"删除成功",
              type:"success"
            })
          }else{
            ElMessage({
              message:"删除失败:"+res.msg,
              type:"error"
            })
          }
          this.userHandleDataList()
        })
      },

      //查询
      userHandleDataList(){
        request.get("/api/user/getUserInfo",{
          params:{
            currentPage:this.userCurrentPage,
            currentSize:this.userCurrentSize
          }
        }).then(res=>{

          if(res.status == 'M0200'){
            this.userTableData=res.data.list;
            this.userTotal = res.data.total;
          }else{
            //提示
            ElMessage({
              message:res.msg,
              type:"error"
            })
          }
        })
      },


      ////////权限///////////////////////////////

      perHandleAdd(){
        this.perDialogFormVisible=true;
        request.get("/api/user/getBH",{
            params:{
                prefix:"QX"
            }
        }).then(resp=>{
            this.PerForm.permissionCode=resp.data
        })
      },

      perHandleDataSelect(){
        this.handlePermissionDataList();
      },
      PermissionSubmit(){
        request.post("/api/user/addPermission",this.PerForm).then(resp=>{
          if(resp.status =='M0200'){
              this.handlePermissionDataList();
              this.PerForm.permissionName='';
              this.perDialogFormVisible=false;
            //提示
            ElMessage({
              message:"添加成功",
              type:"success"
            });
          }else{
            ElMessage({
              message:resp.msg,
              type:"error"
            })
          }
        })
      },
      PermissionHandleCancle(){
        this.perDialogFormVisible=false;
      },
      handlePermissionDataList(){
        request.get("/api/user/getAllPermission",{
          params:{
            currentPage:this.perCurrentPage,
            currentSize:this.perCurrentSize
          }
        }).then(resp=>{
          if(resp.status =='M0200'){
            this.premissionTableData=resp.data.list;
            this.perTotal = resp.data.total;
          }else{
            ElMessage({
              message:"添加失败:",
              type:"error"
            })
          }
        })
      },
      perHandleCurrentChange(v){
        this.perCurrentPage=v
        this.handlePermissionDataList()
      },
      perHandleSizeChange(v){
        this.perCurrentSize=v
        this.handlePermissionDataList()
      },
      //查询权限
      getPermissionList(){
          request.get("/api/user/getPermission").then(resp=>{
            if(resp.status =='M0200'){
              this.permissionList=resp.data;
            }
          })
      } ,

        getRoleInfo(){
            request.get("/api/user/getRoleInfo").then(resp=>{
                if(resp.status =='M0200'){
                    this.roleInfo=resp.data;
                }
            })
        },

        ////////////////////////角色////////////////////////////////////

        roleHandleAdd(){
            this.roleDialogFormVisible=true;
            request.get("/api/user/getBH",{
                params:{
                    prefix:"JS"
                }
            }).then(resp=>{
                this.roleForm.roleCode=resp.data
            })
        },

        roleHandleDataSelect(){
            this.handleRoleDataList();
        },
        roleSubmit(){
            request.post("/api/user/addRole",this.roleForm).then(resp=>{
                if(resp.status =='M0200'){
                    //提示
                    console.log("================")
                    this.roleDialogFormVisible=false
                    this.handleRoleDataList();

                    ElMessage({
                        message:"添加成功",
                        type:"success"
                    });

                }else{
                    ElMessage({
                        message:resp.msg,
                        type:"error"
                    })
                }
            })
        },
        roleHandleEdit(){

        },

        roleHandleDel(index,item){
            request.post("/api/user/roleDel",item).then(res=>{
                if(res.status =='M0200'){
                    //提示
                    ElMessage({
                        message:"删除成功",
                        type:"success"
                    })
                }else{
                    ElMessage({
                        message:"删除失败:"+res.msg,
                        type:"error"
                    })
                }
                this.handleRoleDataList()
            })
        },

        roleHandleCancle(){
            this.roleDialogFormVisible=false;
        },
        handleRoleDataList(){
            request.get("/api/user/getAllRole",{
                params:{
                    currentPage:this.roleCurrentPage,
                    currentSize:this.roleCurrentSize
                }
            }).then(resp=>{
                if(resp.status =='M0200'){
                    this.roleTableData=resp.data.list;
                    this.roleTotal = resp.data.total;
                }else{
                    ElMessage({
                        message:"添加失败:",
                        type:"error"
                    })
                }
            })
        },
        roleHandleCurrentChange(v){
            this.roleCurrentPage=v
            this.handleRoleDataList()
        },
        roleHandleSizeChange(v){
            this.roleCurrentSize=v
            this.handleRoleDataList()
        },

        roleHandleSelectionChange(val){
            this.roleMultipleSelection=val;
        }

    }
  }
</script>
<style>
    :root {
        --el-color-primary: #409eff;
        --el-color-success: #67c23a;
        --el-color-warning: #e6a23c;
        --el-color-danger: #f56c6c;
        --el-color-error: #f56c6c;
        --el-color-info: #909399;
    }
</style>
